import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom';
import "./myscss/Page2.scss"
import { Steps } from 'antd';
import { Toast, NavBar, Uploader, Image, Overlay, Cell } from 'react-vant';
import { ContainerOutlined, ContactsOutlined, FileProtectOutlined } from '@ant-design/icons';
import axios from "axios"
axios.defaults.baseURL = "http://localhost:3000"

const defaultValue = {}
const src = 'https://ts1.cn.mm.bing.net/th/id/R-C.6ba1e46551c53a5c4655dfa725e00fc8?rik=VpP3F%2b6DLSFmZg&riu=http%3a%2f%2f5030017.s21i.faiusr.com%2f2%2fABUIABACGAAg6ZCu7wUoyKnNzgUwuAg4oAs!1000x1000.jpg&ehk=9qWqLTsl%2b9glvrOYG6%2bmCdumGBr8LuNiEjHEXBKfnL8%3d&risl=&pid=ImgRaw&r=0'
const newsrc = ["https://www.med66.com/upload/resources/image/2021/02/06/222606.jpg?1612599778720", "https://ts1.cn.mm.bing.net/th/id/R-C.a1aa99d501f4ff0ee935b466a5fc1767?rik=i5xqnD6ZNCZ11g&riu=http%3a%2f%2fiiyi2.120askimages.com%2fday_140805%2f140805095625cf2277a19b845658.jpg&ehk=v0PPBnzTTuWFE4xlR0WptpXZs9bkCvxajec%2fAILgIzc%3d&risl=&pid=ImgRaw&r=0"]
export default function Page1() {
    const navigate = useNavigate();
    const [current, setCurrent] = useState(1);
    let [imgarr, setImgarr] = useState([])
    let [imgarr1, setImgarr1] = useState([])
    const [visible, setVisible] = useState(false);
    const [showimg, setShowimg] = useState(null)
    const onChange = (value) => {
        if (value === 0) {
            navigate("/ysrz/page1")
        } else if (value === 1) {
            navigate("/ysrz/page2")
        }
        setCurrent(value);
    };

    const imgload = async (e) => {
        if (e.length === 0) {
            return
        }
        const file = new FormData();
        file.append("img", e[0].file.name)
        file.append("file", e[0].url)
        let { data: { imageUrl } } = await axios.post("/addupload", file)
        setImgarr(imageUrl)
    }
    const imgload1 = async (e) => {
        if (e.length === 0) {
            return
        }
        const file = new FormData();
        file.append("img", e[0].file.name)
        file.append("file", e[0].url)
        let { data: { imageUrl } } = await axios.post("/addupload", file)
        setImgarr1(imageUrl)
    }

    return (
        <div id='page2'>
            <div className='top1'>
                <NavBar
                    leftText="执照信息"
                    onClickLeft={() => navigate("/ysrz/page1")}
                />
            </div>
            <div className='top2'>
                <Steps
                    current={current}
                    onChange={onChange}
                    items={[
                        {
                            description: "基本信息",
                            icon: <ContainerOutlined />
                        },
                        {
                            description: "执照信息",
                            icon: <ContactsOutlined />
                        },
                        {
                            description: "提交审核",
                            icon: <FileProtectOutlined />
                        },
                    ]}
                />
            </div>
            <div className='main'>
                <p className='txt1'>以下信息仅做认证使用，不公开</p>
                <p className='txt2'>医生执业证书</p>
                <p className='txt3'>上传带有执业地点详情页的图片</p>
                <div className='img1'>
                    <Uploader
                        accept='*'
                        maxCount={1}
                        onChange={(e) => { imgload(e) }}
                        deletable={true}
                    />
                </div>
                <p className='txt3'>示例</p>
                <Image width='100' height='100' src={src} style={{ margin: "10px", marginBottom: "30px" }} onClick={() => { setVisible(true); setShowimg(src) }} />
                <Overlay visible={visible} onClick={() => setVisible(false)}
                    style={{
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}>
                    <div className='overlay' style={{ width: 360, height: 360, backgroundColor: '#fff', borderRadius: 4 }}>
                        <p style={{ margin: "16px" }}>示例：医生执业证书</p>
                        <Image width='300' height='300' src={showimg} style={{ margin: "20px 30px" }} onClick={() => { setVisible(true) }} />
                    </div>
                </Overlay>

                <p className='txt2'>职称证书</p>
                <p className='txt3'>主治及以上医生请提供职称证书，住院医请提供工牌</p>
                <div className='img1'>
                    <Uploader
                        accept='*'
                        maxCount={1}
                        onChange={(e) => { imgload1(e) }}
                        deletable={true}
                    />
                </div>
                <p className='txt3'>示例</p>
                <div className='imgs'>
                    <Image width='100' height='100' src={newsrc[0]} style={{ margin: "10px", marginBottom: "30px" }} onClick={() => { setVisible(true); setShowimg(newsrc[0]) }} />
                    <Image width='100' height='100' src={newsrc[1]} style={{ margin: "10px", marginBottom: "30px" }} onClick={() => { setVisible(true); setShowimg(newsrc[1]) }} />
                </div>
            </div>
            <div className='bottom'>
                <button onClick={() => navigate("/ysrz/page1")}>上一步</button>
                <button onClick={() => {
                    setCurrent(2); 
                    // Toast.loading({
                    //     message: '加载中...',
                    //     forbidClick: true,
                    // })
                    Toast.success('提交成功')
                    navigate("/home")
                }}>提交审核</button>
            </div>
        </div>
    )
}
